<!-- 角色编辑弹窗 -->
<template>
  <div class="drawerDetail">
    <el-drawer :visible="drawerEditBoolen"
               size="50%"
               :before-close="handleClose"
               ref="drawer"
               :with-header="false">
      <!-- 订单信息 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="">
          <div class="flex-start-center"
               style="padding: 10px 0">
            <div style="margin-right: 5px">姓名:</div>
            <div class="realNameStyle">
              <img class="avaterName"
                   :src="orderInfoData.avatar"
                   alt="" />
              <span>{{ orderInfoData?.nickname }}</span>
            </div>
          </div>
          <div style="padding: 10px 0">手机号: {{ orderInfoData?.phone }}</div>
          <div style="padding: 10px 0">个人介绍: {{ orderInfoData?.introduce }}</div>
          <div style="padding: 10px 0">学校: <span>{{ orderInfoData?.school }}</span>
          </div>
          <div style="padding: 10px 0">性别:{{
              orderInfoData?.sex == 0
                ? '性别不限'
                : orderInfoData?.sex == 1
                ? '男'
                : '女'
            }}</div>
          <div style="padding: 10px 0">需求标签:
            {{ orderInfoData?.label ? orderInfoData?.label : '暂无' }}</div>
          <div style="padding: 10px 0">当前身高: {{ orderInfoData?.height }}cm</div>
          <div style="padding: 10px 0">从事的行业:
            {{ orderInfoData?.trade ? orderInfoData?.trade : '暂无' }}</div>
          <div style="padding: 10px 0">
            生日
            {{ orderInfoData?.birthday ? orderInfoData?.birthday : '暂无' }}
          </div>
          <div style="padding: 10px 0">粉丝数量: {{ orderInfoData?.fans }}</div>
          <div style="padding: 10px 0">地址: {{ orderInfoData?.address }}</div>

          <div style="padding: 10px 0">订单数量: {{ orderInfoData?.service_number }}</div>
          <div style="padding: 10px 0">当前状态:{{ orderStatusFn(orderInfoData?.is_authentication) }}</div>

          生活照片:
          <div class="flex-start-center-wrap">
            <div v-for="(item, index) in this.orderInfoData?.img"
                 :key="index">
              <img @click="imgScare(item)"
                   class="lifeImg"
                   :src="item"
                   alt="" />
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>认证信息</span>
        </div>

        <div class="">
          <div style="padding: 10px 0">身份证姓名: {{ orderInfoData?.real_name }}</div>
          <div style="padding: 10px 0">身份证号码: {{ orderInfoData?.id_card_number }}</div>
          <div class="flex-between"> </div>
        </div>
      </el-card>
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>我的信息</span>
        </div>

        <div class="">
          <div style="padding: 10px 0">工资收入:
            {{
              orderInfoData?.me_income ?regionList[Number(orderInfoData?.me_income)-1].text  : '暂无'
            }}</div>
          <div style="padding: 10px 0">独生子女:
            {{

				 orderInfoData?.me_is_only_child ?orderInfoData.me_is_only_child=='1'?'独生子女':'不是独生子女'  : '暂无'
				
			
            }}</div>
          <div style="padding: 10px 0">是否有车:{{
				orderInfoData?.me_is_have_car
                ?onlyCarList[Number(orderInfoData.me_is_have_car)-1].text
                : '暂无'
			
             
            }}</div>
          <div style="padding: 10px 0">是否有房:
            {{
				
				orderInfoData?.me_is_have_house
                ? onlyHouseList[Number(orderInfoData.me_is_have_house)-1].text
                : '暂无'
           
            }}</div>
          <div style="padding: 10px 0">婚姻状况:
            {{
				
              orderInfoData?.me_marital_status
                ? maritalStatusList[Number(orderInfoData.me_marital_status)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">何时结婚:{{
              orderInfoData?.me_marriage_date
                ? whenMarriedList[Number(orderInfoData.me_marriage_date)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">学历:{{
              orderInfoData?.me_qualifications
                ? me_educationList[Number(orderInfoData.me_qualifications)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">民族:
            {{
              orderInfoData?.me_ethnic ? orderInfoData?.me_ethnic : '暂无'
            }}</div>
        </div>
      </el-card>
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>择偶信息</span>
        </div>

        <div class="">
          <div style="padding: 10px 0">年龄范围:
            {{
              orderInfoData?.ta_age_range ?ageRangeList[Number(orderInfoData.ta_age_range)-1].text: '暂无'
            }}</div>
          <div style="padding: 10px 0">身高范围:
            {{
              orderInfoData?.ta_height_range
                ? heightList[Number(orderInfoData.ta_height_range)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">学历范围:{{
              orderInfoData?.ta_min_qualifications
                ? me_educationList[Number(orderInfoData.ta_min_qualifications)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">ta的收入:
            {{
              orderInfoData?.ta_income ? taRegionList[Number(orderInfoData.ta_income)-1].text : '暂无'
            }}</div>
          <div style="padding: 10px 0">婚姻状况:
            {{
              orderInfoData?.ta_marital_status
                ? taMaritalStatusList[Number(orderInfoData.ta_marital_status)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">是否接受小孩:{{
              orderInfoData?.ta_is_have_child
                ? orderInfoData.ta_is_have_child=='1'?'接受小孩':'不接受小孩'
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">住房要求:
            {{
              orderInfoData?.ta_housing_requirements
                ? taOnlyHouseList[Number(orderInfoData.ta_housing_requirements)-1].text
                : '暂无'
            }}</div>
          <div style="padding: 10px 0">个性:
            {{
              orderInfoData?.ta_personalities
                ? orderInfoData?.ta_personalities
                : '暂无'
            }}</div>
        </div>
      </el-card>

      <el-card class="box-card"
               v-if="orderInfoData?.is_authentication != 2"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>状态更改</span>

          <span style="color: red; font-size: 12px; margin-left: 12px">如果需要进行状态更改请做以下操作,否则不要轻易进行更改</span>
        </div>

        <el-radio-group v-model="radio"
                        v-if="orderInfoData?.is_authentication != 3"
                        @input="inputChange">
          <el-radio :label="2"
                    v-if="orderInfoData?.is_authentication == 1">审核通过</el-radio>

          <el-radio :label="3"
                    v-if="orderInfoData?.is_authentication == 1">驳回</el-radio>
        </el-radio-group>
        <div>
          <el-input v-if="showTextarea"
                    :disabled="orderInfoData.is_authentication == 3 ? true : false"
                    type="textarea"
                    resize="none"
                    placeholder="请输入内容"
                    v-model="remark">
          </el-input>
        </div>
      </el-card>
      <div class="drawer__footer"
           v-if="orderInfoData?.is_authentication == 1"
           :style="{ marginTop: !(radio == 3) ? '100px' : '' }">
        <el-button round
                   type="plain"
                   @click="handleClose"
                   size="medium">返回</el-button>
        <el-button type="primary"
                   round
                   :loading="loading"
                   size="medium"
                   @click="save">确定</el-button>
      </div>
      <!-- <div class="drawer__footer"
           v-else
           :style="{marginTop:!(radio==3)?'100px':''}">
      
      </div> -->
    </el-drawer>
    <!-- 图片预览 -->
    <el-image-viewer v-if="viewerVisible"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
    <el-button type="text"></el-button>
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

// import {
//   userOssSignature,
//   qnyOssSignature
// } from '@/api/creatCenter/material';
// import { storageConfigDetail } from '@/api/storageInfo/index';

// import axios from 'axios';
// import {
//   siteCategoriesInsert,
//   siteCategoriesList,
//   siteCategoriesModify,
//   siteCategoriesDetail
// } from '@/api/serviceManagement/categoriesList';
import { upload } from '@/api/saveImg/index';
import { userInfo, authentication } from '@/api/userList/index';
export default {
  name: 'pictureEdit',
  components: { ElImageViewer },
  props: {
    drawerEditBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  data () {
    // const categoryImage = (rule, value, callback) => {
    //   console.log(this.form.img);
    //   if (!this.form.img) {
    //     callback(new Error('请上传图片'));
    //   } else {
    //     callback();
    //   }
    // };
    const DEFAULT_FORM = {
      // 等级名称
      name: '',
      //   描述
      desc: '',
      // 0 普通会员  1 vip会员
      level: '1',
      //  价格
      price: '',
      // 有效期
      effective_time: '',
      // 搭子数量
      dazi_number: '',
      // 圈子数量
      circle_number: '',
      // 服务数量
      service_number: '',
      // 社群数量
      community_number: ''
    };
    return {
      taRegionList: [{
        text: '2500-5000',
        value: '1'

      }, {
        text: '5000-8000',
        value: '2'

      }, {
        text: '8000-10000',
        value: '3'

      }, {
        text: '10000-15000',
        value: '4'

      }, {
        text: '15000以上',
        value: '5'

      },],
      regionList: [{
        text: '2500-5000',
        value: '1'

      }, {
        text: '5000-8000',
        value: '2'

      }, {
        text: '8000-10000',
        value: '3'

      }, {
        text: '10000-15000',
        value: '4'

      }, {
        text: '15000以上',
        value: '5'

      },],

      onlyChildList: [{
        text: '是',
        value: '1'

      }, {
        text: '否',
        value: '2'

      }],
      taIsHaveChildList: [{
        text: '是',
        value: '1'

      }, {
        text: '否',
        value: '2'

      }],
      onlyCarList: [{
        text: '已购车',
        value: '1'

      }, {
        text: '未购车',
        value: '2'

      }, {
        text: '婚后购车',
        value: '3'

      }],
      onlyHouseList: [{
        text: '已购房',
        value: '1'

      }, {
        text: '未购房',
        value: '2'

      }, {
        text: '婚后购房',
        value: '3'

      }],
      taOnlyHouseList: [{
        text: '不限',
        value: '1'

      }, {
        text: '和家人同居',
        value: '2'

      }, {
        text: '已购房',
        value: '3'

      }, {
        text: '租房',
        value: '4'

      }, {
        text: '婚后购房',
        value: '5'

      }],
      maritalStatusList: [{
        text: '未婚',
        value: '1'

      }, {
        text: '已婚',
        value: '2'

      }, {
        text: '离异',
        value: '3'

      }],
      taMaritalStatusList: [{
        text: '未婚',
        value: '1'

      }, {
        text: '已婚',
        value: '2'

      }, {
        text: '离异',
        value: '3'

      }],
      whenMarriedList: [{
        text: '实际成熟结婚',
        value: '1'

      }, {
        text: '随时结婚',
        value: '2'

      }, {
        text: '一年内结婚',
        value: '3'

      }],
      ageRangeList: [{
        text: '不限',
        value: '1'

      }, {
        text: '18-22岁',
        value: '2'

      }, {
        text: '22-25岁',
        value: '3'

      },
      {
        text: '25-28岁',
        value: '4'

      }, {
        text: '28-30岁',
        value: '5'

      }, {
        text: '30-34岁',
        value: '6'

      }, {
        text: '34-40岁',
        value: '7'

      }, {
        text: '40-45岁',
        value: '8'

      }, {
        text: '45岁以上',
        value: '9'

      }],
      heightList: [{
        text: '不限',
        value: '1'

      }, {
        text: '150-155cm',
        value: '2'

      }, {
        text: '155-160cm',
        value: '2'

      }, {
        text: '160-165cm',
        value: '3'

      }, {
        text: '165-170cm',
        value: '4'

      }, {
        text: '170-175cm',
        value: '5'

      }, {
        text: '175cm以上',
        value: '6'

      }],
      me_educationList: [{
        text: '不限',
        value: '1'

      }, {
        text: '高中以上',
        value: '2'

      }, {
        text: '大专以上',
        value: '3'

      }, {
        text: '本科以上',
        value: '4'

      }, {
        text: '硕士以上',
        value: '5'

      }],
      educationList: [{
        text: '不限',
        value: '1'

      }, {
        text: '高中以上',
        value: '2'

      }, {
        text: '大专以上',
        value: '3'

      }, {
        text: '本科以上',
        value: '4'

      }, {
        text: '硕士以上',
        value: '5'

      }],
      radio: 2,
      storageMode: 2,
      options: [],
      imageUrl: '',
      imgViewArr: [],
      viewerVisible: false,
      // 表单数据
      form: { ...DEFAULT_FORM },
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ],

        desc: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }
        ],
        effective_time: [
          {
            required: true,
            message: '请输入有效时间',
            trigger: 'blur'
          }
        ],
        dazi_number: [
          {
            required: true,
            message: '请输入搭子数量',
            trigger: 'blur'
          }
        ],
        circle_number: [
          {
            required: true,
            message: '请输入圈子数量',
            trigger: 'blur'
          }
        ],
        service_number: [
          {
            required: true,
            message: '请输入服务数量',
            trigger: 'blur'
          }
        ],
        community_number: [
          {
            required: true,
            message: '请输入社群数量',
            trigger: 'blur'
          }
        ]
        // // 站点 图片上传
        // img: [
        //   { required: true, validator: categoryImage, trigger: 'change' }
        // ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false,
      orderInfoData: null,
      showTextarea: false,
      textarea: '',
      remark: '',
      is_authentication: 2,
      averageScore: ''
    };
  },
  activated () { },
  computed: {
    orderStatusFn: function () {
      return function (status) {
        let orderStatus = '';
        // 1 待接单 2 接单中 3 完成 4 已结算 4拒绝订单
        orderStatus =
          status == 0
            ? '未提交'
            : status == 1
              ? '待审核'
              : status == 2
                ? '审核通过'
                : '驳回';

        return orderStatus;
      };
    },
    scoreStatusFn () {
      return function (technology_score, service_score, voice_score) {
        let score;

        score = ((technology_score + service_score + voice_score) / 3).toFixed(
          2
        );
        console.log(score);
        this.averageScore = score;

        return '';
      };
    }
  },
  methods: {
    imgScare (imgStr) {
      console.log(imgStr);
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.viewerVisible = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },

    inputChange (e) {
      console.log(e);
      if (e == 3) {
        this.showTextarea = true;
        this.is_authentication = e;
      } else {
        this.showTextarea = false;
        this.is_authentication = e;
        this.remark = null;
      }
    },
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerEditBoolen', false);
    },
    // 获取存储配置
    // async storageConfig () {
    //   const res = await storageConfigDetail();

    //   // console.log(res.storageMode);

    //   this.storageMode = res?.storageMode;
    // },
    // 关闭查看器
    closeViewer () {
      this.viewerVisible = false;
    },
    // 下载图片
    handleDownload (file) {
      window.open(file.url);
    },
    // 删除图片
    handleRemove () {
      this.fileList = [];
      this.imageUrl = '';
      this.form.img = this.imageUrl;
    },
    //  图片上传个数超过限制
    exceedFn () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
    },

    async handleFileChange (file) {
      this.aliFn(file);
    },
    // 阿里云
    async aliFn (file) {
      this.loading = true;

      let files = file.raw;

      console.log(files);
      // 构建请求参数
      let params = new FormData();
      console.log(params);

      //   params.append('signature', '132321313');
      params.append('file', files);
      console.log(params);

      //   let config = {
      //     headers: {
      //       'Access-Control-Allow-Origin': '*',
      //       'x-oss-callback-Authorization': getToken()
      //     }
      //   };

      const res = await upload(params);
      //   let result = await axios.post(res.host, param, config);
      //   let url = res.host + '/' + date + suffix;
      console.log(res);
      if (res.code == 0) {
        this.form.img = res.data.url;
        this.loading = false;
      }
      //   this.form.categoryImages = url;
      //   this.imageUrl = url;
      //   this.loading = false;
    },

    /* 保存编辑 */
    save () {
      this.loading = true;

      const saveOrUpdate = authentication;
      saveOrUpdate({
        is_authentication: this.is_authentication,
        id: this.orderInfoData.id,
        remark: this.remark
      })
        .then((msg) => {
          console.log(msg);
          this.loading = false;
          this.$message.success(msg.message);

          this.handleClose();
          this.$emit('done');
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    }
    /* 更新visible */
  },
  watch: {
    drawerEditBoolen (visible) {
      this.$nextTick(async () => {
        if (visible) {
          console.log(this.data);
          if (this.data) {
            // this.orderInfoData = this.data

            const res = await userInfo({ uid: this.data.id });

            console.log(res);
            if (res.code == 0) {
              this.orderInfoData = res.data;

              if (res.data.img.includes(',')) {
                // 包含的进行slice(',') 分割

                this.orderInfoData.img = res.data.img
                  .split(',')
                  .map((item) => item.trim());
              } else {
                if (res.data.img.length) {
                  this.orderInfoData.img = res.data.img.split();
                } else {
                  this.orderInfoData.img = [];
                }
              }

              if (res.data.background_img.includes(',')) {
                // 包含的进行slice(',') 分割

                this.orderInfoData.background_img = res.data.background_img
                  .split(',')
                  .map((item) => item.trim());
              } else {
                if (res.data.background_img.length) {
                  this.orderInfoData.background_img =
                    res.data.background_img.split();
                } else {
                  this.orderInfoData.background_img = [];
                }
              }
              console.log(this.orderInfoData);
            } else {
              this.$message.error(res.message);
            }

            if (this.data.is_authentication == 3) {
              this.radio = 3;
              this.is_authentication = 3;
              this.remark = this.data.remark;
              this.showTextarea = true;
            } else {
              this.radio = 2;
              this.is_authentication = 2;
              this.remark = null;
              this.showTextarea = false;
            }

            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.realNameStyle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .avaterName {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    vertical-align: middle;
    margin-right: 5px;
  }
}
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
/deep/.el-textarea__inner {
  margin-top: 20px;
  min-height: 150px !important;
}
.img {
  width: 42px;
  height: 42px;
}

.detailsText {
  margin: 10px 0 10px 43px;
  .evaluateImg {
    width: 90px;
    height: 90px;
    // border-radius: 20px;
    margin-top: 5px;
  }
}
.lifeImg {
  width: 90px;
  height: 90px;
  padding: 10px 10px 10px 0px;
}
.evaluateList {
  margin-bottom: 23px;

  .img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }

  .detailsText {
    margin: 10px 0 10px 43px;
  }
}
.threePoints {
  width: 16px;
  height: 16px;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.height83 {
  height: 83vh;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
